<template>
	<view class="user ">
		<u-navbar :is-back="false" :background="{backgroundColor: '#4E55AF'}" height="50">
			<view class="flex justify-between items-center w-full">
				<view class="flex justify-start items-center">
					<view class="rounded-lg ml-[30rpx] bg-white p-[10rpx] mr-[12rpx]">
						<u-image width="40rpx" height="40rpx" :src="appStore.getWebsiteConfig.shop_logo"></u-image>
					</view>
					<view class="">
						{{t('user.title')}}
					</view>
				</view>
				<view class="flex justify-end pr-[30rpx] ">
					<navigator hover-class="none" url="/pages/notice/index">
						<u-icon size="40" name="bell-fill"></u-icon>
						<u-badge size="mini" type="error" :offset="[20,20]" :count="state.unreadNotice"
							v-if="state.unreadNotice>0"></u-badge>
					</navigator>
				</view>
			</view>
		</u-navbar>
		<view class="max-w-[750px] bg-[#4E55AF] pb-[100rpx]">
			<view class="mb-[20rpx] pt-[30rpx]">
				<w-user-info :user="state.user" :member="state.user.member" />
			</view>
		</view>
		<view class="mb-[50rpx] mt-[-100rpx]">
			<w-user-balance :user="state.user" />
		</view>
		<view class="mb-[20rpx]">
			<w-my-service v-if="state.navs.length>0" :navs="state.navs" />
		</view>
		<view class="mb-[20rpx]">
			<w-my-service v-if="state.navs.length>0" :navs="state.navs2" />
		</view>
		<view class="my-[30rpx] mx-[30rpx]">
			<u-button :custom-style="{'background-color':'#2D3154','color':'#A1DBF5','border':'unset'}" :hair-line="false" @click="logoutHandle">
				{{t('user.logout')}} </u-button>
		</view>
	</view>
	<tabbar />
</template>

<script setup lang="ts">
	import { onShow } from '@dcloudio/uni-app'
	import { useUserStore} from '@/stores/user'
	import { useAppStore } from '@/stores/app'
	import { getUserIndex } from '@/api/user'
	import { reactive } from 'vue'
	import { t } from '@/utils/util'

	uni.setNavigationBarTitle({ title: t('user.title') })
	const userStore = useUserStore()
	const appStore = useAppStore()
	const state = reactive<{
		pages : any[]
		banner : any[]
		navs : any[]
		navs2 : any[]
		user : any[]
		unreadNotice : number
	}>({
		pages: [],
		banner: [],
		navs: [],
		navs2: [],
		user: {
			user_money:0,
			user_point:0
		},
		unreadNotice: 0
	})
	const getData = async () => {
		const data = await getUserIndex()
		state.banner = data.banner
		state.navs = data.navs
		state.navs2 = data.navs2
		state.user = data.user
		state.unreadNotice = data.unreadNotice;
	}

	// 退出登录
	const logoutHandle = () => {
		userStore.logout()
		uni.redirectTo({ url: '/pages/login/login' })
	}

	onShow(() => {
		getData()
	})
</script>

<style>
</style>